<template>
  <div id="tgp">
    <div class="head" v-if="propertyObj.platformType">
      <div class="head-title">
        <img class="width-18 height-18" :src="constant.platformIconObj[propertyObj.platformType]"/>
        <div class="mar-l-6">{{ dict.platformType[propertyObj.platformType] }}</div>
        <div class="split"></div>
        <div>{{ step == 'selectCategory' ? '商品分类' : '商品详情' }}</div>
      </div>
    </div>
    
    <step-select-category v-if="step == 'selectCategory'"
      :platformType="propertyObj.platformType" 
      :shopId="propertyObj.shopId" 
      @next="doCategoryNext"
    >
    </step-select-category>

    <step-set-property v-if="step == 'setProperty'"
      :propertyObj="propertyObj" 
      @last="doPropertyLast"
    >
    </step-set-property>

  </div>
</template>

<script>
  import { getDictByGroupName } from '@/api/common/common'
  import { doGetThirdGoodsById } from '@/api/third/thirdGoods'

  import stepSelectCategory from './step-select-category'
  import stepSetProperty from './step-set-property'

  export default {
    components: {
      stepSelectCategory,
      stepSetProperty
    },
    data() {
      return {
        // 步骤
        step: '',
        // 商品属性对象
        propertyObj: {
          thirdGoodsId: '',
          enterpriseId: '',
          memberId: '',
          goodsId: '',
          shopId: '',
          templateId: '',
          promiseDeliveryType: '',
          kuaiShouCategoryId: ''
        },
        // 数据字典
        dict: {
          platformType: {}
        },
        loading: false
      }
    },
    created() {
      const queryParams = this.getCurrentPage().query
      this.propertyObj.shopId = queryParams.shopId
      this.propertyObj.platformType = queryParams.platformType ? parseInt(queryParams.platformType) : queryParams.platformType
      this.propertyObj.goodsId = queryParams.goodsId
      this.propertyObj.thirdGoodsId = queryParams.thirdGoodsId
      if (!this.propertyObj.shopId) {
        this.$message({ type: 'error', message: '店铺不能为空' })
        return
      }
      if (!this.propertyObj.platformType) {
        this.$message({ type: 'error', message: '平台不能为空' })
        return
      }
      getDictByGroupName('ThirdOrderDTO.platformType').then(response => {
        Object.assign(this.dict, response.data)
      })
      this.init()
    },
    methods: {
      // 初始化
      init() {
        if (this.propertyObj.thirdGoodsId) {
          this.loading = true
          doGetThirdGoodsById({ thirdGoodsId: this.propertyObj.thirdGoodsId }).then(response => {
            if (response.isError) return
            this.loading = false
            Object.assign(this.propertyObj, response.data)
            this.initAfterHandle()
          })
        } else {
          this.propertyObj.enterpriseId = this.getEnterpriseId()
          this.propertyObj.memberId = this.getMemberId()
          this.initAfterHandle()
        }
      },
      // 初始化后处理
      initAfterHandle() {
        if (!this.propertyObj.thirdCategoryId) {
          this.step = 'selectCategory'
        }
      },
      // 选择分类下一步事件
      doCategoryNext(thirdCategoryId, thirdCategoryLabel) {
        this.propertyObj.thirdCategoryId = thirdCategoryId
        this.propertyObj.thirdCategoryLabel = thirdCategoryLabel
        this.step = 'setProperty'
      },
      // 设置属性上一步事件
      doPropertyLast() {
        this.step = 'selectCategory'
      }
    }
  }
</script>

<style lang="less">
  .head {
    background: #393e4d;
    padding: 10px 0;
    .head-title {
      padding-left: 10%;
      color: white;
      font-size: 20px;
      font-weight: bold;
      display: flex;
      align-items: center;
      flex-flow: row;
      .split {
        width: 1px;
        height: 15px;
        background: #fff;
        opacity: 0.24;
        margin: 0px 7px;
      }
    }
  }
</style>